<template>
	<view class="collection">
		<view class="status_bar"></view>
		<view class="header">
			<view class="status_title">
				<image class="status_left" src="/static/img/arr-left.png" mode="widthFix" @click="back"></image>
				<view class="status_center">收藏课程</view>
				<text class="save"></text>
			</view>
		</view>
		<view class="collection-content">
			<z-paging ref="paging" v-model="collectList" @query="queryList" :default-page-size="20">
				<view class="paping-main" >
					<MdItemlineClassComponent :classInfo="list" v-for="list in collectList" />
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
import { getUserCollectList } from '@/services/user.js';
import MdItemlineClassComponent from '@/components/mdItemline/index.vue';
export default {
	components: {
		MdItemlineClassComponent
	},
	data() {
		return {
			collectList: [],
			params: {
				pageNum: 1,
				pageSize: 10,
				searchValue: ''
			}
		};
	},
	onShow() {
		this.getUserCollectListdata();
	},
	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			this.$set(this.params, 'pageNum', pageNo);
			this.$set(this.params, 'pageSize', pageSize);
			this.getUserCollectListdata();
		},
		async getUserCollectListdata() {
			const res = await getUserCollectList(this.params);
			if (res.code == 200) {
				this.collectList = res.rows;
				this.$refs.paging.completeByTotal(res.rows, res.total);
			}
		},
		back(){
			uni.navigateBack()
		}
	}
};
</script>

<style lang="scss" scoped>
.collection {
	
	.z-paging-content-fixed,
	.zp-loading-fixed {
		top: 123rpx;
	}
	.header {
		.status_bar {
			/* height: var(--status-bar-height); */
			width: 100%;
		}
		/* 自定义导航栏 */
		.status_title {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100.061rpx;
			padding: 0 16px;
			background-color: #ffffff;
		}
		.status_left {
			width: 24px !important;
		}
		.status_center {
			font-size: 17px;
			font-weight: 700;
		}
		.status_right {
			width: 22px;
		}
		.save {
			color: #0fb09b;
			font-size: 20rpx;
		}
	}
	.collection-content{
		
	}
	::v-deep{
		.zp-paging-container{
			background-color: #F2F3F7;
			.paping-main{
				margin: 10px 15px;
				padding: 10px;
				background-color: #fff;
			}
		}
	}

}
</style>
